<template>
  <div class="teacher-item">
      <div class="head-div"> 
          <img class="teacher-head" :src="item.avatarUrl?item.avatarUrl+'?imageMogr2/thumbnail/500x':tearcherDefault"/>
          <img class="zhuan" src="../../assets/img/zhuan.png"/>
      </div>
      <div class="teacher-mes"> 
          <p class="teacher-title">
              {{item.teacherName}}
              <em v-show="item.teachSubjectNames">
                  {{item.teachSubjectNames&&item.teachSubjectNames.split(',').slice(0,3).join(',')}}
              </em>
          </p>
          <p class="teacher-word">
              <img src="../../assets/img/teacher-word.png"/>
              <span>{{item.signature}}</span>
          </p>
          <p class="teacher-tip">
              <em v-for="tag in (item.tags&&item.tags.replace(/，/ig,',').split(','))">{{tag}}</em>
          </p>
      </div>
  </div>
</template>

<script>
import tearcherDefault from '../../assets/img/teacher_default.jpg'
export default {
  name: 'teacher-item',
  props:["item"],
  components: {
  },
  data: function () {
    return {
      title: '提示',
      tearcherDefault:tearcherDefault
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.teacher-item{
    display: flex;
    display: -webkit-flex;
    padding: 2.6rem 0;
    background: white;
}
.teacher-item .head-div{
    width: 17rem;
    position: relative;
}
.teacher-head{
    width: 12rem;
    height: 12rem;
    border-radius: 12rem;
    border: 1px solid #cccccc;
}
.zhuan{
    position: absolute;
    top: 9rem;
    right: 4rem;
    width: 3.2rem;
}
.teacher-item .teacher-mes{
    flex: 1;
    -webkit-box-flex: 1;
}
.teacher-title{
    font-size: 3.2rem;
    line-height: 3.2rem;
    color: #333333;
    margin-bottom: 4rem;
}
.teacher-title em{
    font-size: 2.4rem;
    line-height: 2.4rem;
    color: #ff9533;
    float: right;
    clear: both;
    border: 2px solid #ff9533;
    border-radius: .6rem;
    padding: .3rem;
}
.teacher-word{
    font-size: 2.4rem;
    line-height: 2.8rem;
    color: #999999;
    margin-bottom: 2rem;
}
.teacher-tip{
    color: #333333;
    font-size: 2.4rem;
    line-height: 2.4rem;
    /*height: 3.6rem;*/
    /*background: red;*/
    /*display: flex;*/
    text-align: left;
}
.teacher-tip em{
    display: inline-block;
    height: 3.6rem;
    line-height: 3.6rem;
    /*padding: 0 1rem;*/
    margin-right: 2.6rem;
    background: #f2f2f2;
    border-radius: .6rem;
    margin-top: .5rem;
    display: inline-block;
    /*flex: 1;*/
}
</style>
